<template>
  <!--系统消息列表-->
  <div class="app-container">
    <div class="form-container">
      <el-form ref="form" :model="filters" :inline="true" label-width="80px">
        <el-row>
          <el-form-item label="消息标题" prop="title">
            <el-input v-model="filters.title" size="small" placeholder="消息标题" />
          </el-form-item>
          <el-form-item label="阅读状态" prop="status">
            <el-select
              v-model="filters.status"
              placeholder="请选择阅读状态"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" prop="dateRange">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width:225px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="false"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!-- 功能按钮 -->
    <div class="btns-group">
      <el-button v-clickForbidden icon="el-icon-search" size="middle" @click="handleQuery">搜索</el-button>
      <el-button v-clickForbidden icon="el-icon-refresh" size="middle" @click="resetQuery">重置</el-button>
    </div>
    <!-- 列表信息 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      stripe
      class="table-list"
      :class="highLevelSet===true ? (needTagsView===true ? 'el-body-page-roll-tag-height' : 'el-body-page-roll-height') :
        (needTagsView===true ? 'el-body-page-roll-tag' : 'el-body-page-roll')"
      :row-style="rowClass"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="51" align="center" />
      <el-table-column label="消息标题" prop="title" min-width="150" align="center">
        <template slot-scope="scope">
          <div class="link-type" @click="handleDetail(scope.row)">{{ scope.row.title }}</div>
        </template>
      </el-table-column>
      <el-table-column label="消息类别" prop="msgType" min-width="140" align="center" :formatter="(row) => msgTypeFormat(row)" />
      <el-table-column label="阅读状态" prop="status" min-width="80" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '0'">未读</span>
          <span v-if="scope.row.status === '1'">已读</span>
          <span v-if="scope.row.status === '2'">已审批</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="total"
      :page.sync="filters.pageNum"
      :limit.sync="filters.pageSize"
      @pagination="getList"
    />
    <!-- 详情 -->
    <detailDialog ref="detailDialog" />
  </div>
</template>

<script>
import detailDialog from './components/detailDialog'
import { listReceive, changeStatus } from '@/api/PersonalOffice/info/index.js'
import { mapState } from 'vuex'
export default {
  name: 'Info',
  components: {
    detailDialog
  },
  data() {
    return {
      // 消息类型数组
      msgTypeOptions: [
        {
          value: '1',
          label: '新闻'
        },
        {
          value: '2',
          label: '公告'
        },
        {
          value: '3',
          label: '图片新闻'
        },
        {
          value: '4',
          label: '审批'
        },
        {
          value: '5',
          label: '审批状态'
        }
      ],
      // 消息状态数组
      statusOptions: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '未读'
        },
        {
          value: '1',
          label: '已读'
        }
      ],
      // 消息等级数组
      levelOptions: [
        {
          value: '0',
          label: '一般'
        },
        {
          value: '1',
          label: '重要'
        }
      ],
      // 筛选条件
      filters: { // 查询参数
        pageNum: 1,
        pageSize: 20,
        title: '', // 消息状态
        msgType: '', // 消息类型
        level: '', // 消息等级
        status: '' // 阅读状态
      },
      highLevelSet: false,
      dateRange: [],
      /* 列表 start*/
      tableData: [], // 列表
      loading: false, // 列表加载
      total: 1, // 分页总条数
      selectRow: [], // 高亮数组
      selectData: [],
      multipleSelection: [] // 选中的行对象
      /* 列表 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: state => state.settings.tagsView
    }),
    // 高级搜索显示隐藏
    handleTagShow() {
      return this.highLevelSet
    }
  },
  created() {
    // 阅读状态
    // getDicts('sys_job_status').then(resp => {
    //   this.statusOptions = resp.data.rows
    // })
    // 消息等级
    // this.getDicts('info_grade').then(response => {
    //   this.levelOptions = response.data.rows
    // })
  },
  mounted() {
    // 获取数据
    this.getList()
  },
  methods: {
    // 消息等级字典翻译
    levelFormat(row, column) {
      return this.selectDictLabel(this.levelOptions, row.level)
    },
    // 消息类别回显
    msgTypeFormat(row) {
      const mesType = new Map([
        ['011', ['项目分配人员', '/newProject/project-detail']], // x后只发消息不确认
        // ['012', ['项目分配设备', '/newProject/project-detail']],
        ['021', ['钻孔分配人员', '/newProject/exploration-detail']],
        // ['022', ['项目人员分配钻孔', '/PersonalOffice/explorationConfirm']],
        // ['031', ['钻孔分配设备', '/newProject/exploration-detail']],
        // ['032', ['项目设备分配钻孔', '/PersonalOffice/explorationConfirm']],
        ['041', ['人员加入企业', '/PersonalOffice/personalInfo']],
        ['042', ['企业选择人员', '/PersonalOffice/enterpriseInfo']],
        ['051', ['监管分配勘察单位', '/newProject/project-detail']], // x
        ['052', ['勘察单位指定人员', '/newProject/project-detail']], // x
        ['061', ['责任部门', '/newProject/project-detail']], // x
        ['062', ['部门分人', '/newProject/project-detail']], // x
        ['071', ['企业审核', '/personalOffice/enterpriseApproval']],
        ['072', ['用户审核', '/personalOffice/personApproval']],
        ['default', ['-', '/index']]
      ])
      if (row.msgType) {
        const action = mesType.get(row.msgType)
        return action[0]
      }
    },
    // 获取数据
    async getList() {
      const { data: { rows, total }} = await listReceive(this.changeDateRange(this.filters, this.dateRange))
      this.tableData = rows
      this.total = total
      // this.addTaleData()
    },
    /* 列表 start*/
    // list表格填充空白行
    addTaleData() {
      const arr = {}
      if (this.tableData.length < this.filters.pageSize) {
        this.tableData.push(arr)
        this.addTaleData()
      }
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background-color': 'rgba(185,221,249,.75)' }
      }
    },
    /* 列表 end */

    /* 按钮 start */
    // 搜索方法
    handleQuery() {
      this.getList()
    },
    // 重置搜索
    resetQuery() {
      this.resetForm('form')
      this.dateRange = []
      this.handleQuery()
    },
    // 点击标题查看详情事件
    async handleDetail(item) {
      const mesType = new Map([
        ['011', ['项目分配人员', '/newProject/project-detail']], // x后只发消息不确认
        // ['012', ['项目分配设备', '/newProject/project-detail']],
        ['021', ['钻孔分配人员', '/newProject/exploration-detail']],
        // ['022', ['项目人员分配钻孔', '/PersonalOffice/explorationConfirm']],  注释后不再发消息
        // ['031', ['钻孔分配设备', '/newProject/exploration-detail']],
        // ['032', ['项目设备分配钻孔', '/PersonalOffice/explorationConfirm']],
        ['041', ['人员加入企业', '/PersonalOffice/personalInfo']],
        ['042', ['企业选择人员', '/PersonalOffice/enterpriseInfo']],
        ['051', ['监管分配勘察单位', '/newProject/project-detail']], // x
        ['052', ['勘察单位指定人员', '/newProject/project-detail']], // x
        ['061', ['责任部门', '/newProject/project-detail']], // x
        ['062', ['部门分人', '/newProject/project-detail']], // x
        ['071', ['企业审核', '/personalOffice/enterpriseApproval']],
        ['072', ['用户审核', '/personalOffice/personApproval']],
        ['default', ['首页', '/index']]
      ])
      const content = JSON.parse(item.content)
      content['msgType'] = item.msgType
      content['messageId'] = item.id
      const action = mesType.get(item.msgType) || mesType.get('default')
      this.$router.push({ path: action[1], query: content })
      await changeStatus({ id: item.id, status: '1' })
    }
    /* 按钮 end */
  }
}
</script>

<style scoped>
</style>

